<template>
	<view class="content">
		<next-paging
		    ref="paging" 
		    v-model="dataList" 
		    @query="queryList"
			:fixed="false"
		    :autoShowBackToTop="true"
		    :defaultPageSize="6"
			:auto="false"
			emptyViewImg = '/static/img/noneOrder.png'
			emptyViewText= "暂无订单"
			:emptyViewCenter= "false"
		>
		    <view class="order-items">
		        <view class="item" v-for="(item,index) in list" :key="index" v-if="requstType != 22">
		    		<view class="head" @tap="goDetial(item)">
		    			<image src="/static/img/xuexiao.png" mode="" class="h-icon"></image>
		    			{{item.student.student_history.school_name}} 
		    			<image src="/static/img/right-arrow.png" mode="" class="h-icon2"></image>
		    			<view class="status">
		    				{{get_CN(item.show_status,item.prepayment_type)}}
		    			</view>
		    		</view> 
		    		<view class="body" @tap="goDetial(item)">
		    			<view class="name">{{item.activity.alias}}</view>
		    			<view class="f-name">订单编号：{{item.no}}</view>
		    			<view class="f-name">学生：{{item.student.name}}</view>
		    			<view class="f-name">
						<text style="margin-right: 15rpx;">共 {{item.total_quantity}} 件</text>  
		    			 <template v-if="item.prepayment_type == 1">
		    				    <text class="beforePrice" v-if="item.show_status == 0">待付款: </text>
								<text class="beforePrice" v-if="item.show_status == 8">已支付预付款: </text>
								<text class="beforePrice" v-if="item.show_status == 1 || item.show_status == 2 || item.show_status == 9 || item.show_status == 4">预付款: </text>
								<text class="marR" :class="{'price':item.show_status == 0}">¥ {{item.total_amount}}</text>
								<text>总金额：{{item.order_total_amount}}</text>
		    			 </template>
		    			 <template v-else>
		    			 	 <text class="beforePrice" v-if="item.show_status == 0">待付款: </text>
		    	             <text class="beforePrice" v-if="item.show_status != 0">总金额: </text>
							 <text class="marR" :class="{'price':item.show_status == 0}">¥ {{item.total_amount}}</text>
		    			 </template>
		
						</view>
						<view class="f-name"  v-if="item.show_status == 8">
							<text class="beforePrice">待支付尾款: </text>
							<text class="price marR">¥ {{(item.order_total_amount - item.total_amount).toFixed(2)}}</text>
						</view>
		    		</view>
		    		<view class="foot">
		    			<view class="left"></view>
		    			<view class="right" v-if="item.is_auto == 0">
		    				<view class="obt" v-if="item2.k != 8 && item2.k != 4" :class="{'obt-a':item2.k == 2 || item2.k == 5 || item2.k == 9 || item2.k == 10}" @tap='btnEvent(item2.k,item)' v-for="(item2,index2) in item.btn" :key="index2"> 
		    				  {{item2.v}}
		    				</view>
		    			</view>
						<view class="right" v-if="item.is_auto == 1">
							<view class="obt" v-if="item2.k != 8 && item2.k != 3 && item2.k != 1 && item2.k != 4" :class="{'obt-a':item2.k == 2 || item2.k == 5 || item2.k == 9 || item2.k == 10}" @tap='btnEvent(item2.k,item)' v-for="(item2,index2) in item.btn" :key="index2"> 
							  {{item2.v}}
							</view>
						</view>
		    		</view>
		    	</view>
		    	<view class="item after" v-if="requstType == 22" v-for="(item,index) in list" :key="index">
		    		<view class="head">
		    			<image src="/static/img/xuexiao.png" mode="" class="h-icon"></image>
		    			{{item.order.student.student_history.school_name}}
		    			<image src="/static/img/right-arrow.png" mode="" class="h-icon2"></image>
		    			<view class="status">
		    				 <text v-if="item.refund_type == 1">仅退款</text>
		    				 <text v-if="item.refund_type == 2">退货退款</text>
		    			</view>
		    		</view>
		    		<view class="body">
		    			<view class="name" @tap="goAfterDetial(item.id)">{{item.order.activity.alias}}</view>
		    			<view class="af-info" @tap="goAfterDetial(item.id)" v-for="(item2,index2) in item.order.order_goods" :key="index">
		    				<view class="af-name">
		    					<text v-if="item.order.prepayment_type == 1">【预售】</text>{{item2.goods_name}}
		    				</view>
		    				<view class="af-num">
		    					<text>× {{item2.quantity}}</text>
		    					<text class="priceBox">
		    					<!-- 	<text v-if="item.order.prepayment_type == 1">预售：</text> -->
		    						<text>售价：</text>
		    					<text class="price">¥ {{item2.goods_sale_price}}</text></text>
		    				</view>
		    			</view>
		    		</view>
		    		<view class="foot">
		    			<view class="left">
		    				<text class="left-text price" style="margin-right: 20rpx;">{{item.audit_status_str}}</text>
							<text class="left-text">{{item.status_str}}</text>
		    			</view>
		    			<view class="right">
							<view class="obt" @tap="EventBtSh(item2.k,item)" :class="{'obt-a': item2.k == 2}" v-for="(item2,index2) in item.btn" :key='index2'>{{item2.v}}</view>
		    				<!-- <view class="obt obt-a">重新申请</view> -->
		    			</view>
		    		</view>
		    	</view>
		    </view>
		</next-paging>
	</view>
</template>
<script>
import { getOrder, getAfterOrder, paycancel, receipTOrder, delTOrder, computTOrder, creatOrder, removeAfter } from '@/api/goods.js'
import { payCreatOrder,  payformOrder} from '@/api/pay.js'
	export default {
		data() { 
			return {
				list: [], // 数据集
				page: 1, // 当前页码
				totalPages: "" ,// 总页数
				is_bottom:false,
				ready:true,
				i:1,
				dataList: [],
		  }
		},
		props: {
			swiperIndex: {
				type: [Number, String],
				default: -1
			},
			activeItem: {
				type: [Number, String],
				default: 0
			},
			requstType: {
				type: [Number, String],
				default: 0
			}
		},
		watch: {
			activeItem: {
			    immediate:false,
			    handler(nVal, oVal) {
				   const index = this.swiperIndex;
				   if(index === nVal) {
					   if(this.list.length < 1) {
						   // debugger
						   this.$nextTick(() => {
							   // debugger;
							this.$refs.paging.reload();							
						   });
					   }
				   }   
			    }
			}
		},
		mounted() {
			// console.log('mounted');
			// if(this.activeItem == this.swiperIndex) {
			// 	this.ready = false;
			// 	 this.$nextTick(() => {
			// 	   this.GetList(1);
			// 	});
			// }
		},
		computed : {	
			
		},
		methods: {
			async queryList(pageNo, pageSize) {
				//console.log(this.requstType);
				const obj = {
					pageSize:6,
					page:pageNo,
					subscribe_type:0,
					show_status:this.requstType
				}
				let res;
				if(this.requstType == 22) {
					res = await getAfterOrder(obj)
				} else {
					res = await getOrder(obj)
				}
				if(pageNo == 1) {
					this.list = res.data.data;
				} else {
					this.list.push(...res.data.data);
				}
				
				this.$refs.paging.complete(res.data.data);
			},
			EventBtSh(id,item) {
				if(id == 1) {
					this.$Router.push('/pages/afterDetial/afterDetial?id=' + item.id)
					// this.$Router.push('/pages/orderDetail/orderDetail?id=' + item.id)
				} else {
					this.RemoveAfter(item.id);
				}
			},
		    goDetial(item) {
				if(item.is_auto == 1) {
					this.$Router.push('/pages/orderDetail/orderDetail2?id=' + item.id)
				} else {
					this.$Router.push('/pages/orderDetail/orderDetail?id=' + item.id)
				}
				
			},
			btnEvent(id,item) {
				console.log(id);
				switch(id)
					{
						case 1:
						    // console.log(item);
							this.goDetial(item.id)
							break;
						case 2:  //
							if(item.is_auto == 1) {
								this.goDetial(item)
							} else {
								payformOrder(item.id);
							}
							
							break;
					    case 3: //取消订单
							this.Paycancel(item.id)
							break;	
						case 4: //申请售后 
							this.applyAfter(id,item)
							break;
						case 5: //确认收货
							this.ReceipTOrder(id,item)
							break;
						case 6: //完成订单
							this.ComputTOrder(id,item)
							break;
						case 7: //删除订单
						    this.DelTOrder(id,item)
							break;
						case 9: 
						    
							this.topay(item.payment_pay.activity_id,item);
							break;
						case 10:
							payformOrder(item.payment_pay.order_id);
							break;	
						case 11:
							this.$Router.push('/pages/afterDetial/afterDetial?id=' + item.last_after_sale.id)
							break;	
						default:
							break;
					}
			},
			topay(id,item) {
				//console.log(id);
				let goods_ids = {}
				// let is_selectGoods = this.goods.filter(item  => item.is_selected  == 1);
				// console.log(is_selectGoods);
				item.order_goods.forEach((item) => {
					goods_ids[item.goods_id] = item.quantity
				})
				// console.log(item.order_goods);
				// console.log(goods_ids);
				const post_data = {
					student_id:this.user.student_id,
					activity_id:id,
					goods_ids:JSON.stringify(goods_ids),
					master_order_id:item.id
				}
				payCreatOrder(post_data);
			},
			async DelTOrder(id,item) {
			  const res = await delTOrder({id:item.id});
			  console.log(res);
			  if(res) {
				  this.toast('操作成功');
				  this.GetList(1);
			  }
			},
			applyAfter(id,item) {
				let parms;
				 if(item.show_status == 1) {
					 parms = 1;
				 } else {
					  parms = 2;
				 }
				this.$Router.push('/pages/afterInput/afterInput?id=' + item.id + '&select=' + parms)
			},
			async RemoveAfter(id) {
				// console.log(id);
				const  res = await removeAfter({after_sale_id:id});
				if(res) {
					this.toast("操作成功")
					this.GetList(1);
				}
			},
			async Paycancel(id) {
			   const res = await paycancel({id:id});
			   if (res.status_code == 200) {
				   uni.showToast({
				   	  title:'操作成功',
					  icon:'none'
				   })
				   this.GetList(1)
			   }
			},
			//确认收货
			async ReceipTOrder(id,item) {
				 const res = await receipTOrder({id:item.id});
				 if(res) {
					 uni.showToast({
					 	title:'操作成功',
						icon:'none'
					 })
					 this.GetList(1)
				 }
			},
			async ComputTOrder(id,item) {
				 const res = await computTOrder({id:item.id});
				 if(res) {
					 uni.showToast({
					 	title:'操作成功',
						icon:'none'
					 })
					 this.GetList(1)
				 }
			},
			onshowRefresh() {
			    setTimeout(() => {
					this.$refs.paging.reload();
				},1)
			},
			goAfterDetial(id) {
				this.$Router.push('/pages/afterDetial/afterDetial?id=' + id)
			},
			scrolltolower() {
				if(this.is_bottom) {
					this.$refs.pullScroll.finish();
				} else {
					this.$refs.pullScroll.showUpLoading();
					this.GetList();
				}
			},
			async GetList(type) {
				if(type == 1) {
					this.page = 1;
					this.is_bottom = false;
					this.ready = false;
					this.list = [];
				}
				const obj = {
					page:this.page,
					subscribe_type:0,
					show_status:this.requstType
				}
				let res;
				if(this.requstType == 7) {
					res = await getAfterOrder(obj)
				} else {
					res = await getOrder(obj)
				}
				this.list.push(...res.data.data);
				this.ready = true;
				if(this.page >= res.data.last_page) {
					this.is_bottom = true;
				} else {
					this.page ++;
				}
			},
			 async pullDown() {
				 this.ready = false;
				  this.page = 1;
				  this.list = [];
				  const obj = {
					page:this.page,
					subscribe_type:0,
					show_status:this.requstType
				  }
				  
				  let res;
				  if(this.requstType == 7) {
						res = await getAfterOrder(obj)
					} else {
						res = await getOrder(obj)
					}
				 
				  if(res.status_code == 200) {
					  this.list = res.data.data;
					  this.$refs.pullScroll.success();
					   this.ready = true;
					  if(this.page >= res.data.last_page) {
							this.is_bottom = true;
						} else {
							this.page ++;
						}
				  } else {
					  console.log(res);
				  }
			  },
			  get_CN(num,prepayment_type) {
			  	if(num == 0 && prepayment_type == 1) {
			  		return '待支付预付款'
			  	}
				if(num == 0 && prepayment_type == 0) {
					return '待支付'
				}
				if(num == 1) {
					return '已购买'
				}
			  	if(num == 7) {
			  		return '已预订'
			  	}
				if(num == 8) {
					return '付尾款'
				}
			  	if(num == 2) {
			  		return '待收货'
			  	}
			  	if(num == 3) {
			  		return '已收货'
			  	}
			  	if(num == 4) {
			  		return '已完成'
			  	}
			  	if(num == 5) {
			  		return '已取消'
			  	}
			  	if(num == 6) {
			  		return '交易关闭'
			  	}
			  }
		}
	}
</script>
<style lang="scss">
  .obt {
	  width: 150rpx;
	  height: 60rpx;
	  border-radius: 14rpx;
	  background-color: #f2f2f2;
	  color:27rpx;
	  font-size: 26rpx;
	  margin-left: 32rpx;
	    @include center;
	  &.obt-a {
		  background-color: #ffebeb;
		  color:#ff4f4f;
	  }
  }
  .price {
  	 color:#ff4f4f;	
  }
  .marR {
	  margin-right: 20rpx;
  }
  .content{
    width: 100%;
    height: 100%;
  }
  .order-items {
	  width: 700rpx;
	  margin: 0 auto;
	  .none-img {
		  // display: flex;
		  // justify-content: center;
		  padding-top: 60rpx;
		  .noneImg {
			  width: 463rpx;
			  height: 474rpx;
			  display: block;
			  margin: 0 auto;
		  }
		  .noneText {
			  text-align: center;
			  color:#ddd;
			  padding-top: 30rpx;
		  }
	  }
	  .item {
		  background-color: #fff;
		  padding: 0 30rpx;
		  border-radius: 26rpx;
		  margin-bottom: 30rpx;
		  &:last-of-type {
			  margin-bottom: 0;
		  }
		  .head {
			height: 92rpx;
			width: 100%;
			border-bottom: 1px solid #f5f5f5;
			display: flex;
			align-items: center;
			position: relative;
			.h-icon {
				width: 35rpx;
				height: 35rpx;
				margin-right: 20rpx;
			}
			.h-icon2 {
				margin-left: 20rpx;
				width: 14rpx;
				height: 22rpx;
				top: 2rpx;
				position: relative;
			}
			.status {
				color:#ff4f4f;
				position: absolute;
				top:26rpx;
				right: 0;
				font-size: 29rpx;
			}
		  }
		  .body {
			  padding: 15rpx 0 16rpx;
			  border-bottom: 1px solid #f5f5f5;
			  .name {
				  color: #333333;
				  font-size: 32rpx;
				  line-height:48rpx;
				  margin-bottom: 15rpx;
			  }
			  .f-name {
				  color:#a6a6a6;
				  font-size: 28rpx;
				  margin-bottom: 8rpx;
				  .beforePrice {
					  margin-right: 10rpx;
				  }
				  .price {
					  color:#ff4f4f;
				  }
			  }
			  .af-info {
				  background-color: #f7f7f7;
				  padding: 32rpx 32rpx 22rpx; //10
				  line-height: 40rpx;
				  border-radius: 20rpx;
				  margin-bottom: 10rpx;
				  .af-name {
					  font-size: 28rpx;
					  margin-bottom: 5rpx;
				  }
				  .af-num {
					  font-size: 26rpx;
					  color:#a6a6a6;
					  .priceBox {
						  margin-left: 15rpx;
					  }
					  .price {
						  color:#ff4f4f;	
					  }
				  }
			  }
		  }
		  .foot {
			  width: 100%;
			  height: 118rpx;
			  display: flex;
			  justify-content: space-between;
			  align-items: center;
			  .left, .right {
				  .left-text {
					  margin-right: 20rpx;
					  font-size: 29rpx;
				  }
				  display: flex;
			  }
		  }
	  }
  }
</style>

